<template>
	<d2-container 
		v-loading="isLoading" 
		element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)" 
    :filename="filename" type="card">
    <template slot="header">
    	{{title}}
    	<el-button type="primary" size='mini' icon="el-icon-refresh" style='float: right; margin-left: 10px;' :loading='isLoading' @click='refresh' plain>重新加载</el-button>
    	<el-button type="success" size='mini' icon="el-icon-check" style='float: right;' :loading='isLoading' @click='dialogFormVisible = true'>保存快照</el-button>
    </template>
		<div id="defaultTopo" class="defaultTopo"></div>
		<el-dialog title="保存快照" width="30%" :visible.sync="dialogFormVisible">
		  <el-form>
		    <el-form-item label="快照描述: " label-width="100px">
		      <el-input v-model="description" autocomplete="off"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		  	<el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="save">确 定</el-button>
		  </div>
		</el-dialog>
  </d2-container>
</template>

<script>
	import { topoDiscoverMapper } from '@/api/mapper'
	import base from './mixins/index'
	export default {
		name: 'index',
		mixins: [
    	base
  	],
  	data() {
			return {
				title: '默认拓扑图',
				filename: __filename,
				description: ''
			}
		},
		methods: {
			/**
			 * [save 保存快照]
			 * @return {[type]} []
			 */
			save(){
				this.addPosition(this.description)
				this.description = ''
			},
			/**
			 * [refresh 清空当前页缓存并刷新此页面]
			 * @return {[type]} []
			 */
			refresh() {
        this.keepAliveRemove('index')
        this.$nextTick(this.$router.replace('/refresh'))
			},
			/**
			 * [topoDiscoverMapper 加载默认拓扑图]
			 * @return {[type]} [description]
			 */
			topoDiscoverMapper(){
				this.isLoading = true
				topoDiscoverMapper({
					openingSystemId: '',
					modelId: ''
				})
				.then(res => {
					this.drawTopo(res, 'defaultTopo')
				})
			}
		},
		mounted() {
			this.keepAlivePush('index')
			this.topoDiscoverMapper()
		}
	}
</script>

<style scoped lang="less">
	.defaultTopo {
		width: 100%;
		height: 1000px;
	}
	.container-component {
		/deep/ .d2-container-card__body-card {
			margin-bottom: 0 !important;
			padding: 0 !important;
		}
	}
</style>
